<template>
  <view class="good-list">
    <uni-list v-for="(item, index) in list" :key="index">
      <uni-list-item>
        <template slot="body">
          <view class="u-cell-group">
            <view class="u-cell-item">
              <text class="title">{{$t('申请单名称')}}：{{ item.title }}</text>
            </view>
            <view class="u-cell-item">
              <text class="subTitle">{{$t('合同编号')}}：{{ item.serialNumber }}</text>
            </view>
            <view class="u-cell-item">
              <text class="subTitle">{{$t('发起方')}}：{{ item.originateEnterprise }}</text>
            </view>
            <view class="u-cell-item">
              <text class="subTitle">{{$t('发起人')}}：{{ item.originateUser }}</text>
            </view>
            <view class="u-cell-item">
              <text class="subTitle">{{$t('签署方')}}：{{ item.enterpriseName }}</text>
            </view>
            <view class="u-cell-item">
              {{$t('所有签署方')}}：
              <u-tag
                v-for="(item2, index2) in item.liaisonSignContentList"
                :key="index2"
                :text="item2.name"
                size="mini"
                style="margin-right: 10rpx; margin-bottom: 10rpx"
                type="info"
              ></u-tag>
            </view>
            <view class="u-cell-item">
              {{$t('签署状态')}}：
              <u-tag
                v-for="(item2, index2) in item.liaisonSignContentList"
                :key="index2"
                :text="computedTypeId(item2.status, 'text')"
                :type="computedTypeId(item2.status)"
                size="mini"
                style="margin-right: 10rpx; margin-bottom: 10rpx"
              ></u-tag>
              {{$t('提取码')}}：
              <view style="color: #2579ff" @click="copyFn(item.extractKey)">
                {{ item.extractKey }}
              </view>
            </view>
            <view v-if="item.remark" class="u-cell-item">
              <text class="subTitle">{{$t('备注')}}：{{ item.remark }}</text>
            </view>
            <view class="u-cell-item-btn">
              <u-button
                v-if="item.showSubmit === true"
                class="u-button"
                shape="circle"
                size="mini"
                type="warning"
              >
                {{$t('确定')}}
              </u-button>
              <u-button
                v-if="item.showSign === true"
                class="u-button"
                shape="circle"
                size="mini"
                type="primary"
                @click="signFn(item)"
              >
                {{$t('签署')}}
              </u-button>
              <u-button
                v-if="item.showExtract === true"
                class="u-button"
                shape="circle"
                size="mini"
                type="primary"
                @click="extract(item)"
              >
                {{$t('提取合同')}}
              </u-button>
              <u-button
                v-if="item.showRefused === true"
                class="u-button"
                shape="circle"
                size="mini"
                type="warning"
                @click="refused(item)"
              >
                {{$t('拒绝签署')}}
              </u-button>
              <u-button
                v-if="item.showPreview === true"
                class="u-button"
                shape="circle"
                size="mini"
                type="success"
                @click="preview(item)"
              >
                {{$t('预览')}}
              </u-button>
              <u-button
                v-if="item.showDownload === true"
                class="u-button"
                shape="circle"
                size="mini"
                type="success"
                @click="download(item)"
              >
                {{$t('下载')}}
              </u-button>
              <u-button
                class="u-button"
                shape="circle"
                size="mini"
                type="success"
                @click="remark(item)"
              >
                {{$t('备注')}}
              </u-button>
              <u-button
                class="u-button"
                shape="circle"
                size="mini"
                type="success"
                @click="copyFn(item.extractKey)"
              >
                {{$t('复制提取码')}}
              </u-button>
            </view>
          </view>
        </template>
      </uni-list-item>
    </uni-list>
    <u-modal
      ref="uModal"
      v-model="modal.show"
      :async-close="true"
      :title="$t('modal.title')"
      show-cancel-button
      @confirm="confirmFn"
    >
      <view class="slot-content">
        <u-input v-model="modal.value" border />
      </view>
    </u-modal>
  </view>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'
import i18n from '@/lang/lang'
export default {
  computed: {
    ...mapGetters(['userInfo', 'api']),
    computedTypeId() {
      return (typeId, type) => {
        let arr = this.contractStatusList.find((item) => item.key === typeId)
        if (arr) {
          return type === 'text' ? arr.value : arr.color
        } else {
          return type === 'text' ? i18n.t('待定') : 'info'
        }
      }
    }
  },
  props: {
    // 签署状态  initiate:初始化状态  waiting:待提取  extracted:待签署  processing:待审批  authorizing:待授权  using:待用印  completed:已完成  failure:已失效  refused:已拒绝  expired:已过期
    contractStatusList: {
      type: Array,
      default: () => {
        return []
      }
    },
    list: {
      type: [Array],
      default() {
        return []
      }
    },
    option: {
      //当前页面信息，从哪里点进的
      type: Object,
      default() {
        return {}
      }
    },
    titleId: {
      //当前tab名称
      type: [Number, String],
      default() {
        return ''
      }
    }
  },
  data() {
    return {
      modal: {
        show: false,
        title: this.$t('原因'),
        value: '',
        row: ''
      }
    }
  },
  mounted() {
  },
  methods: {
    //复制
    copyFn(value) {
      uni.setClipboardData({
        data: value,
        success: () => {
          uni.showToast({
            title: this.$t('复制成功')
          })
        }
      })
    },
    //下载
    download(item) {
      let url =
        uni.getStorageSync('baseUrl') +
        this.api.GLOBAL_electronic_contract_downloadContract +
        '/' +
        item.contractId +
        '?Authorization=' +
        this.userInfo.token +
        '&us=app'
      uni.downloadFile({
        url, //仅为示例，并非真实的资源
        success: (res) => {
          if (res.statusCode === 200) {
            var filePath = res.tempFilePath
            //#ifndef H5
            uni.openDocument({
              filePath: filePath,
              showMenu: true,
              success: (res) => {
                //console.log('打开文档成功');
              }
            })
            //#endif
            //#ifdef H5
            window.open(filePath)
            //#endif
          }
        }
      })
    },
    //预览
    preview(item) {
      this.$lizhao.debounce(() => {
        uni.navigateTo({
          url: '../../electronicSeal/pdfPreview/pdfPreview',
          events: {
            confirm(data) {
              //console.log(data);
            }
          },
          success(res) {
            res.eventChannel.emit('pagePramas', { enterpriseContractId: item.id, type: '合同管理' })
          }
        })
      }, 500)
    },
    //确定
    confirmFn() {
      if (this.modal.title === '原因') {
        if (!this.modal.value) {
          uni.showToast({
            title: this.$t('请输入原因'),
            icon: 'none'
          })
          this.$refs.uModal.clearLoading()
          return
        }
        let req = {
          reason: this.modal.value,
          enterpriseContractId: this.modal.row.id
        }
        //章的接口
        this.$u
          .post(this.api.GLOBAL_electronic_enterprise_contract_refused, req, {
            'content-type': 'application/json'
          })
          .then((res) => {
            this.$refs.uModal.clearLoading()
            if (res.code === 200) {
              uni.showToast({
                title: res.msg
              })
              this.modal.show = false
              uni.$emit('applicationDetailsToApplicationList', true)
            }
          })
      } else if (this.modal.title === '备注') {
        if (!this.modal.value) {
          uni.showToast({
            title: this.$t('请输入备注信息'),
            icon: 'none'
          })
          this.$refs.uModal.clearLoading()
          return
        }
        let req = {
          contractId: this.modal.row.contractId,
          remark: this.modal.value,
          enterpriseId: this.modal.row.enterpriseId
        }
        //章的接口
        this.$u
          .post(this.api.GLOBAL_electronic_enterprise_contract_remark, req, {
            'content-type': 'application/json'
          })
          .then((res) => {
            this.$refs.uModal.clearLoading()
            if (res.code === 200) {
              uni.showToast({
                title: res.msg
              })
              this.modal.show = false
              this.modal.row.remark = this.modal.value
            }
          })
      } else if (this.modal.title === '提取码') {
        if (!this.modal.value) {
          uni.showToast({
            title: this.$t('请输入提取码'),
            icon: 'none'
          })
          this.$refs.uModal.clearLoading()
          return
        }
        let req = {
          enterpriseId: this.modal.row.enterpriseId, //企业合同id
          extractKey: this.modal.value, //合同提取码
          contractId: this.modal.row.contractId //合同id
        }
        this.$u
          .post(this.api.GLOBAL_electronic_enterprise_contract_extract, req, {
            'content-type': 'application/json'
          })
          .then((res) => {
            this.$refs.uModal.clearLoading()
            if (res.code === 200 && res.data) {
              uni.showToast({
                title: res.msg
              })
              this.modal.show = false
              uni.$emit('applicationDetailsToApplicationList', true)
            } else {
              uni.showToast({
                title: res.msg,
                icon: 'none'
              })
            }
          })
      }
    },
    //备注
    remark(item) {
      this.modal.value = ''
      this.modal.show = true
      this.modal.title = '备注'
      this.modal.row = item
    },
    extract(item) {
      this.modal.value = ''
      this.modal.show = true
      this.modal.title = '提取码'
      this.modal.row = item
    },
    //拒绝签署
    refused(item) {
      this.modal.value = ''
      this.modal.show = true
      this.modal.title = '原因'
      this.modal.row = item
    },
    //签署
    signFn(data) {
      uni.navigateTo({
        url: '/pages/electronicSeal/applicationSeal/applicationSeal',
        success: (res) => {
          res.eventChannel.emit('pagePramas', data)
        },
        fail: () => {},
        complete: () => {}
      })
    },
    navigetTo(item) {
      item.deviceType = this.titleId
      uni.navigateTo({
        url:
          '/pages/application/useDetails/useDetails?data=' +
          encodeURIComponent(JSON.stringify(item)),
        success: (res) => {},
        fail: () => {},
        complete: () => {}
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.good-list {
  background-color: #fff;
  width: 100%;

  .u-cell-group {
    font-size: 28rpx;

    .u-cell-item {
      padding: 10rpx 0;
      box-sizing: border-box;
      z-index: 10;
      display: flex;
      position: relative;
      flex-wrap: wrap;

      .title {
        margin-right: 10rpx;
        font-weight: bold;
      }
    }

    .u-cell-item-btn {
      .u-button {
        margin-right: 20rpx;
        margin-bottom: 20rpx;
      }
    }
  }

  .slot-content {
    padding: 10px 20px;
  }
}
</style>
